<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="ev">
    <style>
        #ev {
            width: 300px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }

    </style>
    目标元素
</div>
<script type="text/javascript">
  var ev = document.getElementById('ev');

  //true捕获过程触发 flase冒泡阶段触发
  window.addEventListener('click', function () {
    console.log("window capture")
  }, true);

  document.addEventListener('click', function () {
    console.log("document capture")
  }, true);

  document.documentElement.addEventListener('click', function () {
    console.log("html capture")
  }, true);

  document.body.addEventListener('click', function () {
    console.log("body capture")
  }, true);

  ev.addEventListener('click', function () {
    console.log('ev capture')
  })


  window.addEventListener('click', function () {
    console.log("window capture")
  }, false);

  document.addEventListener('click', function () {
    console.log("document capture")
  }, false);

  document.documentElement.addEventListener('click',  () =>{
    console.log(this)
  }, false);

  document.body.addEventListener('click', function () {
    console.log("body capture")
  }, false);

  var eve = new Event('test');
  ev.addEventListener('test', function () {
    console.log('test dispatch');
  });

  setTimeout(() => {
    ev.dispatchEvent(eve);
  }, 1000)

</script>
</body>
</html>
